---
layout: examples
title: SUI Mobile Demo
---

<div class="page">
  <header class="bar bar-nav">
    <a class="button button-link button-nav pull-right open-popup" data-popup=".popup-about">
      关于
      <span class="icon icon-menu"></span>
    </a>
    <h1 class="title">百川H5演示</h1>
  </header>
  <nav class="bar bar-tab">
    <a class="tab-item active" href="#">
      <span class="icon icon-home"></span>
      <span class="tab-label">首页</span>
    </a>
    <a class="tab-item" href="/examples/baichuan/goods" data-transition='slide-in'>
      <span class="icon icon-app"></span>
      <span class="tab-label">商品</span>
    </a>
    <a class="tab-item" href="/examples/baichuan/settings" data-transition='slide-in'>
      <span class="icon icon-me"></span>
      <span class="tab-label">我的</span>
    </a>
  </nav>
  <div class="content pull-to-refresh-content page-home infinite-scroll" id='home-page'>
    <style>
      .card-header {
        height: 10rem;
        overflow: hidden;
      }
    </style>
    <div class="pull-to-refresh-layer">
      <div class="preloader"></div>
      <div class="pull-to-refresh-arrow"></div>
    </div>
    <!-- 这里是页面内容区 -->
    <div class="list">
      <a href='/examples/baichuan/detail' data-transition='slide-in'>
        <div class="card color-default">
          <div style="" valign="bottom" class="card-header color-white no-border no-padding">
            <img class='card-cover' src="//gd1.alicdn.com/bao/uploaded/i1/TB1kzlgHVXXXXbtXpXXXXXXXXXX_!!0-item_pic.jpg_640x640.jpg" alt="">
          </div>
          <div class="card-content">
            <div class="card-content-inner">
              <p>ROZENE春纯棉四件套 床上春夏 床单被套四件套全棉天丝四件套春夏</p>
              <p class="color-gray">发表于 2015/01/15</p>
            </div>
          </div>
          <div class="card-footer">
            <span class="link">赞(120)</span>
            <span class="link">评论(20)</span>
          </div>
        </div>
      </a>
      <a href='/examples/baichuan/detail' data-transition='slide-in'>
        <div class="card color-default">
          <div style="" valign="bottom" class="card-header color-white no-border no-padding">
            <img class='card-cover' src="//gd2.alicdn.com/bao/uploaded/i2/TB1mEnmHXXXXXXHapXXXXXXXXXX_!!0-item_pic.jpg_640x640.jpg" alt="">
          </div>
          <div class="card-content">
            <div class="card-content-inner">
              <p>Roz居家美式高档床上用品纯棉4四件套全棉床单被套1.8m床上四件套</p>
              <p class="color-gray">发表于 2015/01/15</p>
            </div>
          </div>
          <div class="card-footer">
            <span class="link">赞(120)</span>
            <span class="link">评论(20)</span>
          </div>
        </div>
      </a>
      <a href='/examples/baichuan/detail' data-transition='slide-in'>
        <div class="card color-default">
          <div style="" valign="bottom" class="card-header color-white no-border no-padding">
            <img class='card-cover' src="//gd2.alicdn.com/bao/uploaded/i2/TB1QtUmGVXXXXbgaXXXXXXXXXXX_!!0-item_pic.jpg_640x640.jpg" alt="">
          </div>
          <div class="card-content">
            <div class="card-content-inner">
              <p>美式床品套件 四件套 家纺全棉四件套 纯棉被套4件套床单</p>
              <p class="color-gray">发表于 2015/01/15</p>
            </div>
          </div>
          <div class="card-footer">
            <span class="link">赞(120)</span>
            <span class="link">评论(20)</span>
          </div>
        </div>
      </a>
    </div>
    <div class="infinite-scroll-preloader">
      <div class="preloader"></div>
    </div>
    <div style='display:none' id='index-tpl'>
      <a href='/examples/baichuan/detail' data-transition='slide-in'>
        <div class="card color-default">
          <div style="" valign="bottom" class="card-header color-white no-border no-padding">
            <img class='card-cover' src="//gd4.alicdn.com/bao/uploaded/i4/TB13mgfHpXXXXcVXFXXXXXXXXXX_!!2-item_pic.png_640x640.jpg" alt="">
          </div>
          <div class="card-content">
            <div class="card-content-inner">
              <p>R居家馆 高档床上用品4件套纯棉 床单式提花四件套 全棉贡缎 欧式</p>
              <p class="color-gray">发表于 2015/01/15</p>
            </div>
          </div>
          <div class="card-footer">
            <span class="link">赞(120)</span>
            <span class="link">评论(20)</span>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>
<div class="popup popup-about">
  <div class="content-block">
    <h2 class="text-center">移动开发新篇章</h2>
    <p>面向移动开发者，百川计划提供包含电商场景对接、流量转化与变现、技术服务、创业扶持等全链路解决方案，全方位助力创业团队的快速成长及商业变现。</p>
    <p>Empower your business：通过阿里输出的能力，让您在专注于擅长领域的同时，强化您的商业能力；</p>
    <p>Easy your employee：让您的员工从繁杂的重复劳动中解放出来，发挥其更大的潜力；</p>
    <p>Envy your competitor：让您在激烈的竞争中，获得让竞争者嫉妒的加速度与竞争优势；</p>
    <p>Excite your investor：让您的投资方，看到新生APP在未来发展的美好图景与光明未来；</p>
    <p>Explore more possibilities：通过深入的合作与共同地探寻，发现重构行业，实现颠覆的无限可能。</p>
    <p><a href="#" class="button close-popup">确定</a></p>
  </div>
</div>
